<template>
  <h4>x的值:{{ sum }}</h4>
  <button type="" @click="sum++">点击x值+1</button>
  <hr />
  <h2>{{ `姓名：${name}` }}</h2>
  <h2>年龄： {{ age }}</h2>
  <h2>薪水：{{ job.j1.salary }}K</h2>
  <button type="" @click="name += '~'">修改姓名</button>
  <button type="" @click="age++">增长年龄</button>
  <button type="" @click="job.j1.salary++">涨薪</button>
</template>

<script>
// ref, reactive,
import { ref, reactive, toRefs, shallowReadonly } from "vue";
export default {
  name: "App",
  setup() {
    let sum = ref(0);

    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 15,
        },
      },
    });

    // person = readonly(person)
    // person = shallowReadonly(person)

    // sum = readonly(sum)
    // sum = shallowReadonly(sum)

    // - readonly: 让一个响应式数据变为只读的（深只读）。
    // - shallowReadonly：让一个响应式数据变为只读的（浅只读）。
    // - 应用场景: 不希望数据(尤其是这个数据是来自与其他组件时)被修改时。

    return {
      sum,
      ...toRefs(person),
    };
  },
};
</script>
